<!DOCTYPE html>
<html>
<head>
    <title>Basic usage</title>

    <link href="../../content/shared/styles/examples-offline.css" rel="stylesheet">
    <link href="../../../styles/kendo.common.min.css" rel="stylesheet">
    <link href="../../../styles/kendo.default.min.css" rel="stylesheet">

    <script src="../../../js/jquery.min.js"></script>
    <script src="../../../js/kendo.web.min.js"></script>
    <script src="../../content/shared/js/console.js"></script>
</head>
<body>
    <a class="offline-button" href="../index.html">Back</a>
    

<div id="example">
    <div id="panel" class="demo-section k-widget k-header">
        <ul>
            <li>
                <label for="blog-title">Title:</label>
                <input type="text" id="blog-title" value="Demo Title" class="k-textbox" />
            </li>
            <li>
                <label for="blog-twitter">Twitter handle:</label>
                <input type="text" id="blog-twitter" value="kendoui" class="k-textbox" />
            </li>
            <li>
                <label for="blog-content">Content:</label>
                <textarea id="blog-content" rows="4" cols="60" class="k-textbox">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</textarea>
            </li>
        </ul>

        <button id="preview" class="k-button">Preview</button>
    </div>

    <div id="blog-preview"></div>
</div>

<script type="text/x-kendo-template" id="template">
    <h3 class="k-widget k-header">#= title #</h3>
    <article>
    <img alt="#= twitter #" title="#= twitter #" width="73" height="73" class="t-widget"
    src="http://api.twitter.com/1/users/profile_image?screen_name=#= twitter #&size=bigger" />
    <h4>posted on <time>#= new Date().toLocaleDateString() #</time> by <strong>#= twitter #</strong></h4>
    <p>#= content #</p>
    </article>
</script>

<script>
    var template = kendo.template($("#template").html());

    function preview() {
        $("#blog-preview").html(template({
            title: $("#blog-title").val(),
            twitter: $("#blog-twitter").val(),
            content: $("#blog-content").val()
        }));
    }

    preview();

    $("#preview").click(preview);
</script>

<style scoped>
    #panel
    {
        background-image: none;
        margin: -16px 0 30px;
        padding: 30px 0 25px;
    }

    #panel input,
    #panel textarea
    {
        font: inherit;
        margin: -5px 0 5px;
    }

    #exampleWrap ul h3
    {
        margin-bottom: 0.6em;
        padding: 0;
    }

    #exampleWrap ul
    {
        list-style: none;
        margin: 0;
        padding: 0;
    }

    #example ul label
    {
        display: inline-block;
        vertical-align: top;
        width: 110px;
        padding: 0 8px;
        text-align: right;
    }

    #preview
    {
        margin-left: 129px;
    }

    #preview
    {
        height: 26px;
        width: 140px;
    }

    #example li
    {
        margin: 0.4em 0;
    }

    #example h3.k-header
    {
        margin: 1.4em 0 1em;
        padding: .4em 1.4em;
        font-size: 1.4em;
        border-radius: 2px;
    }

    #blog-content
    {
        height: 100px;
    }

    #blog-preview
    {
        width: 84%;
        margin: 0 auto 40px;
    }

    #blog-preview img
    {
        float: left;
        margin: 0 14px 0 0;
        border: 3px solid #dedede;
        -moz-border-radius: 3px;
        -webkit-border-radius: 3px;
        border-radius: 3px;
    }

    #blog-preview h4
    {
        font-size: 10px;
        font-weight: normal;
        text-transform: uppercase;
        color: #8d8d8d;
        margin-top: 0;
        border-bottom: 1px solid #dedede;
    }

    #blog-preview h4 strong
    {
        color: #ed662e;
    }

    #blog-preview p,
    #blog-preview h4
    {
        margin-left: 93px;
    }
</style>

</body>
</html>
